<template>
  <div class="supplier-category">
    <div class="operation-bar">
      <el-button type="primary" @click="handleAdd">新增分类</el-button>
    </div>

    <base-table
      :data="categoryList"
      v-model:current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @page-change="handlePageChange">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="name" label="分类名称" />
      <el-table-column prop="code" label="分类编码" />
      <el-table-column prop="description" label="描述" show-overflow-tooltip />
      <el-table-column prop="count" label="供应商数量" width="100" />
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-button type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </base-table>

    <!-- 分类表单对话框 -->
    <el-dialog :title="dialogTitle" v-model="dialogVisible" width="500px">
      <el-form :model="categoryForm" label-width="100px">
        <el-form-item label="分类名称">
          <el-input v-model="categoryForm.name" />
        </el-form-item>
        <el-form-item label="分类编码">
          <el-input v-model="categoryForm.code" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="categoryForm.description" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import BaseTable from "../components/BaseTable.vue";

// 分类列表数据
const categoryList = ref([
  {
    id: 1,
    name: "生产商",
    code: "PRODUCER",
    description: "产品生产制造商",
    count: 10,
  },
  {
    id: 2,
    name: "代理商",
    code: "AGENT",
    description: "产品代理销售商",
    count: 5,
  },
  {
    id: 3,
    name: "经销商",
    code: "DEALER",
    description: "产品经销商",
    count: 8,
  },
]);

// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(100);

// 对话框相关
const dialogVisible = ref(false);
const dialogTitle = ref("新增分类");
const categoryForm = reactive({
  name: "",
  code: "",
  description: "",
});

// 处理分页变化
const handlePageChange = (page) => {
  // 这里添加获取数据的逻辑
};

// 处理新增分类
const handleAdd = () => {
  dialogTitle.value = "新增分类";
  Object.assign(categoryForm, {
    name: "",
    code: "",
    description: "",
  });
  dialogVisible.value = true;
};

// 处理编辑分类
const handleEdit = (row) => {
  dialogTitle.value = "编辑分类";
  Object.assign(categoryForm, row);
  dialogVisible.value = true;
};

// 处理删除分类
const handleDelete = (row) => {
  ElMessageBox.confirm("确定要删除该分类吗？", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    ElMessage.success("删除成功");
  });
};

// 处理表单提交
const handleSubmit = () => {
  ElMessage.success(dialogTitle.value === "新增分类" ? "添加成功" : "更新成功");
  dialogVisible.value = false;
};
</script>

<style scoped>
.supplier-category {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}

.operation-bar {
  margin-bottom: 20px;
}
</style>
